<template>
  <div class="home">
    <head-top head-title="邻里在线" hidden='true'></head-top>
    <div class="search">
      <input type="text" placeholder="请输入你想要搜索的小区">
      <span class="search-icon"></span>
    </div>
    <ul class="mainmenu clearfix">
        <li><a href="/" ><b class="one"></b><span>小区公告</span></a></li>
        <li><a href="/" ><b class="two"></b><span>事务投票</span></a></li>
        <li><a href="/" ><b class="three"></b><span>治理透明</span></a></li>
        <li><a href="/" ><b class="four"></b><span>一键缴费</span></a></li>
        <li><a href="/" ><b class="five"></b><span>物业报修</span></a></li>
        <li><a href="/" ><b class="six"></b><span>办事指南</span></a></li>
        <li><a href="/" ><b class="seven"></b><span>周边服务</span></a></li>
        <li><a href="/" ><b class="eight"></b><span>生活福利</span></a></li>
        <li><a href="/" ><b class="nine"></b><span>租售中心</span></a></li>
        <li><a href="/" ><b class="ten"></b><span>邻里求助</span></a></li>
        <li><a href="/" ><b class="eleven"></b><span>邻里闲置</span></a></li>
    </ul>
    <div class="split"></div>
    <div class="notice">
      <h5 class="title">公告</h5>
      <ul>
        <li><span class="content">关于召开业主委员会的公告</span><span class="go"></span></span>
        <li><span class="content">关于业主大会决议的公告</span><span class="go"></span></li>
        <li><span class="content">关于物业招标的公告</span><span class="go"></span></li>
      </ul>
    </div>
    <div class="split"></div>
    <div class="rent-sale">
      <h5 class="title">租售</h5>
      <ul>
        <li><img src="./images/sell_1@2x.png" alt=""><span class="des">出租17幢2单元1003室114方</span></li>
        <li><img src="./images/sell_2@2x.png" alt=""><span class="des">出租17幢2单元1003室114方</span></li>
      </ul>
    </div>
    <div class="split"></div>
    <div class="linli">
      <h5 class="title">邻里</h5>
      <ul>
        <li><span class="content">寻人信息</span><span class="go"></span></span>
        <li><span class="content">寻狗信息</span><span class="go"></span></li>
        <li><span class="content">童车出售</span><span class="go"></span></li>
        <li><span class="content">自行车赠送</span><span class="go"></span></li>
      </ul>
    </div>
    <div class="split"></div>
    <v-footer></v-footer>
  </div>
</template>
<style lang="scss">
   @import "../../common/sass/base.scss";
   @import "../../common/sass/mixin.scss";
  .home{
    background-color: #fff;
    padding-bottom: 60px;
    .search{
    position: relative;
    margin-top: 40px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    @include border-bottom-1px(rgb(217,217,217));
    input{
      outline: none;
      border: none;
      font-size: 13px;
      padding-left: 5px;
    }
    .search-icon {
      position: absolute;
      top: 6px;
      right: 10px;
      display: inline-block;
      width: 17px;
      height: 17px;
      background-size: 17px 17px;
      background-repeat: no-repeat;
      @include bgimg('./images/search');
    }
  }
  .mainmenu {
    width: 100%;
    margin-bottom: 10px;
    li{
      float: left;
      width: 25%;
      overflow: hidden;
      a{
        display: block;
        text-align: center;
        text-decoration: none;
        b{
          display: inline-block;
          margin: 14px auto 7px;
          height: 27px;
          width: 27px;
          background-size: 27px 27px;
          background-repeat: no-repeat;
          @include bgimg("./images/gonggao");
           &.two{
            @include bgimg("./images/vote");
          }
           &.three{
            @include bgimg("./images/zltm");
          }
           &.four{
            @include bgimg("./images/pay");
          }
           &.five{
            @include bgimg("./images/baoxiu");
          }
           &.six{
            @include bgimg("./images/guide");
          }
           &.seven{
            @include bgimg("./images/zbfw");
          }
           &.eight{
            @include bgimg("./images/fuli");
          }
           &.nine{
            @include bgimg("./images/zszx");
          }
           &.ten{
            @include bgimg("./images/help");
          }
          &.eleven{
            @include bgimg("./images/xianzhi");
          }
        }
        span{
          display: block;
          color: black;
          font-size: 12px;
          // font-weight: 900;
        }
      }
    }
  }
  .split{
    width: 100%;
    height: 10px;
    background-color: #F2F2F2;
  }
  .notice{
    padding: 10px 10px 0 10px;
    .title{
      padding-bottom: 10px;
      color:rgb(0,0,0);
      @include border-bottom-1px(rgb(217,217,217));
    }
    ul{
      li{
        padding: 15px 0;
        @include border-bottom-1px(rgb(217,217,217));
        &:last-child{
          @include border-none();
        }
        .content{
          font-size: 15px;
          // font-weight: 700;
          color: rgb(41,41,41);
        }
        .go{
          float: right;
          height: 16px;
          width: 8px;
          background-size: 8px 16px;
          background-repeat: no-repeat;
          @include bgimg("./images/back");
        }
      }
    }
  }
  .linli{
    padding: 10px 10px 0 10px;
    .title{
      padding-bottom: 10px;
      color:rgb(0,0,0);
      @include border-bottom-1px(rgb(217,217,217));
    }
    ul{
      li{
        padding: 15px 0;
        @include border-bottom-1px(rgb(217,217,217));
        &:last-child{
          @include border-none();
        }
        .content{
          font-size: 15px;
          // font-weight: 700;
          color: rgb(41,41,41);
        }
        .go{
          float: right;
          height: 16px;
          width: 8px;
          background-size: 8px 16px;
          background-repeat: no-repeat;
          @include bgimg("./images/back");
        }
      }
    }
  }
  .rent-sale{
    padding: 10px;
    .title{
      padding-bottom: 10px;
      color:rgb(0,0,0);
      @include border-bottom-1px(rgb(217,217,217));
    }
    ul{
      li{
        padding: 10px 0;
        @include border-bottom-1px(rgb(217,217,217));
        &:last-child{
          @include border-none();
        }
        img{
          display: inline-block;
          font-size: 0;
          height: 55px;
          width: 55px;
          vertical-align: middle;
        }
        .des{
          vertical-align: middle;
          margin-left: 10px;
          // font-weight: 700;
          font-size: 15px;
          color: rgb(41,41,41);
        }
      }
    }
  }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import Footer from '../footer/Footer.vue'
  export default {
    name: 'Home',
    data () {
      return {}
    },
    components: {
      headTop,
      'v-footer': Footer
    }
  }
</script>
